<template>
  <div class="legend-container">
    <div class="legend-header">
      <svg width="20" height="20" viewBox="0 0 24 24" class="legend-icon">
        <circle cx="12" cy="12" r="10" fill="#00e4ff" />
      </svg>
      <span class="legend-title">人员密度图例</span>
      <span class="legend-toggle" @click="toggleCollapse">
        <el-icon v-if="isCollapsed"><ArrowUpBold /></el-icon>
        <el-icon v-else><ArrowDownBold /></el-icon>
      </span>
    </div>
    <div class="legend-list" v-if="!isCollapsed">
      <div class="legend-item" v-for="item in legendList" :key="item.label">
        <span class="legend-color" :style="{ background: item.color }"></span>
        <span class="legend-label">{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const isCollapsed = ref(false);
const legendList = [
  { color: '#FF0000', label: '高: >600' },
  { color: '#FF8000', label: '较高: 500-600' },
  { color: '#FFFF00', label: '中等: 400-500' },
  { color: '#00FF00', label: '一般: 300-400' },
  { color: '#00FFFF', label: '较低: 200-300' },
  { color: '#0000FF', label: '低: ≤200' }
];
function toggleCollapse() {
  isCollapsed.value = !isCollapsed.value;
}
</script>

<style scoped>
.legend-container {
  background: rgba(14, 89, 214, 0.34);
  border-radius: 10px;
  padding: 12px 16px 16px 16px;
  width: 220px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 2px solid #0e59d6;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}
.legend-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
}
.legend-icon {
  margin-right: 6px;
}
.legend-title {
  color: #24f2fe;
  font-size: 18px;
  font-weight: bold;
  flex: 1;
}
.legend-toggle {
  color: #24f2fe;
  font-size: 18px;
  cursor: pointer;
  margin-left: 8px;
  user-select: none;
}

.legend-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legend-item {
  display: flex;
  align-items: center;
  background: rgba(14, 89, 214, 0.34);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 15px;
  color: #24f2fe;
  border: 1px solid #2e5a6a;
}
.legend-color {
  width: 28px;
  height: 18px;
  border-radius: 4px;
  margin-right: 12px;
  display: inline-block;
}
.legend-label {
  flex: 1;
}
.legend-close {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin-left: 8px;
  user-select: none;
  color: #24f2fe;
}
</style>
